<template>
  <div class="feedback">
    <div v-for="(item,index) in list" :key="index" class="detail_selt">
      <div class="page-box" v-if="list.length>1">{{index+1}}</div>
      <ul class="detail-border">
        <li>
          <span>处置时间</span>
          {{item.disposetime}}
        <li>
          <span>处置内容</span>
          {{item.situation}}
        </li>
        <li>
          <span>处置人</span>
          {{item.handler}}
        </li>
        <li>
          <span>处置图片</span>
          <div class="img-box" v-if="item.urls">
            <div class="icon-po" v-for="(item1, index1) in item.urls.split(',')" :key="index1"
              @click="preview(item.urls,item1)">
              <img class="image" :src="getimage(item1)" v-if="item1" />

            </div>
          </div>
        </li>
      </ul>
      <div class="circle-left"> </div>
      <div class="circle-right"> </div>
      <ul v-if="item.pushoperator||item.operatedate||item.pushmsg">
        <li>
          <span>推送人</span>
          {{item.pushoperator}}
        </li>
        <li>
          <span>推送时间</span>
          {{item.operatedate}}
        </li>
        <li>
          <span>推送内容</span>
          {{item.pushmsg}}
        </li>
      </ul>
    </div>


  </div>
</template>

<script>
  import {
    ImagePreview
  } from 'vant';
  import config from "../http/config";
  export default {
    data() {
      return {
      };
    },
    props: {
      list: {
        type: Array,
        default: () => []
      },
    },
    methods: {
      preview(url, firstUrl) {
        var baseUrl=config.baseUrl + "alarmFlowController/getFtpFile/";
        let urls = [];
        urls.push(baseUrl+firstUrl)
        let keys = url.split(',');
        keys.forEach(item => {
          if (item && item != firstUrl) {
            urls.push(baseUrl+ item)
          }
        });
        ImagePreview(urls);
      },
      getimage(item) {
        let path = config.baseUrl + "alarmFlowController/getFtpFile/" + item
        return path;
      }
    },
    mounted() {


    }
  };
</script>

<style scope lang="stylus">
</style>
<style lang="stylus">
  .detail_selt {
    margin-top: 0.2rem;
    background: #fff;
    box-shadow: 0 7px 10px 0px rgba(157, 168, 177, 0.3);
    border-radius: 7px;
    padding: 0.3rem;

    .page-box {
      background-color: #7CB1EF;
      height: 0.5rem;
      width: 0.5rem;
      position: relative;
      right: 0.3rem;
      bottom: 0.3rem;
      border-top-left-radius: 7px;
      border-bottom-right-radius: 7px;
      color: #fff;
      text-align: center;
    }

    .detail-border {
      border-bottom: 0.01rem solid #EDEFF1;
    }

    .circle-left {
      width: 0.4rem;
      height: 0.4rem;
      background-color: #f5f6fa;
      border-radius: 50%;
      position: relative;
      right: 0.6rem;
      bottom: 0.2rem;
    }

    .circle-right {
      width: 0.4rem;
      height: 0.4rem;
      background-color: #f5f6fa;
      border-radius: 50%;
      position: relative;
      left: 6.6rem;
      bottom: 0.6rem;
    }

    ul {
      padding: 0.05rem 0;

      li {
        line-height: 0.64rem;
        display: flex;
        color: #000;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;

        span {
          flex-shrink: 0;
          width: 1.7rem;
          display: table;
          color: #838383;
        }

        .img-box {
          display: flex;

          .image {
            width: 1.58rem;
            height: 1.58rem;
          }

          .icon-po {
            flex: 1;
            position: relative;
          }

        }



      }
    }
  }
</style>